<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>FineUICore扩展（一） | 没想好的个人博客</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> -->
   <!-- Font Awesome CSS-->
   <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">

   <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="shortcut icon" href="https://shixixiyue.gitee.io//favicon.ico?v=1709791195950">
<link rel="stylesheet" href="https://shixixiyue.gitee.io//styles/main.css">



<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://jsd.onmicrosoft.cn/npm/vue/dist/vue.js"></script>


<style>
  .hljs-ln{
    padding-bottom: 1.2rem;
    margin: 0rem !important;
  }
  .hljs-ln td {
    border: none !important;
    padding: 2px 6px !important;
    line-height: 1.2rem;
    font-size: 1rem;
  }
  .hljs-ln tr td:first-child  {
    color: cadetblue;
    border-right: 1px solid !important;
  }
  .hljs-ln tr {
    border: none !important;
  }
</style>

    <meta name="description" content="FineUICore也出了一段时间了，我把FineUIMVC的代码整理移植了下，发现除了把FineUIMVC替换成FineUICore外其他代码都能用。以前写过FineUIMVC的扩展，现在我将一步步整理到FineUICore中并在此作为记..." />
    <meta name="keywords" content="FineUICore" />
  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://shixixiyue.gitee.io/">
        <img src="https://shixixiyue.gitee.io//images/avatar.png?v=1709791195950" class="site-logo">
        <h1 class="site-title">没想好的个人博客</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/4gOKry8Qv/" class="site-nav">
            .Net Core
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/njETBpqXu/" class="site-nav">
            FineUICore
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/XyXyeLOBB" class="site-nav">
            读书笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/TyVX6hfCJ" class="site-nav">
            Vue笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/3Hz2sPtzO/" class="site-nav">
            产品
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/Db1wShB_E" class="site-nav">
            其他
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            一一一一一一一一一
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//archives" class="site-nav">
            文章归档
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tags" class="site-nav">
            全部标签
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      没事啥都说
    </div>
    <div class="site-footer">
      QQ：<a href="tencent://message/?uin=935732994&Site=''&Menu=yes">935732994<a/> <a href="http://beian.miit.gov.cn">京ICP备2024045283号<a/> | <a class="rss" href="https://shixixiyue.gitee.io//atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">FineUICore扩展（一）</h2>
            <div class="post-date">2019-03-27
            
                
                  <a href="https://shixixiyue.gitee.io/tag/njETBpqXu/" class="tag">
                    FineUICore
                  </a>
                
            </div>
            
            <div class="post-content" v-pre>
              <p>FineUICore也出了一段时间了，我把FineUIMVC的代码整理移植了下，发现除了把FineUIMVC替换成FineUICore外其他代码都能用。以前写过<a href="140.143.155.224:8086">FineUIMVC的扩展</a>，现在我将一步步整理到FineUICore中并在此作为记录以供大家学习。</p>
<!-- more -->
<p><ul class="markdownIt-TOC">
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#%E5%AF%BC%E8%A8%80">导言</a></li>
<li><a href="#1-%E5%89%8D%E5%8F%B0%E5%86%99%E4%BB%80%E4%B9%88">1. 前台写什么</a></li>
<li><a href="#2-%E6%89%A9%E5%B1%95%E7%B1%BB">2. 扩展类</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<blockquote>
<h4 id="导言">导言</h4>
<p>FineUICore也出了一段时间了，我把FineUIMVC的代码整理移植了下，发现除了把FineUIMVC替换成FineUICore外其他代码都能用。以前写过<a href="140.143.155.224:8086">FineUIMVC的扩展</a>，现在我将一步步整理到FineUICore中并在此作为记录以供大家学习。</p>
</blockquote>
<p>在开发项目中，有很多代码是重复冗余的（原谅我没基础过高深的框架），比如当用到Grid控件，往往用到增删改按钮，我在这里做了扩展，前天通过几行代码生成按钮并与后台交互，代码可能只适用我的开发环境，主要记录的是方法。</p>
<h4 id="1-前台写什么">1. 前台写什么</h4>
<p>这里前台只的是 .cshtml文件，通常给Grid控件添加按钮是放在Toolbar的Items里，如下</p>
<pre><code>.Toolbars(
    F.Toolbar().Items(
            F.Button().Text(&quot;新增&quot;).ID(&quot;btnadd&quot;).Icon(Icon.Add).OnClientClick(&quot;&quot;),
            F.Button().Text(&quot;修改&quot;).ID(&quot;btnedit&quot;).Icon(Icon.ApplicationEdit).OnClientClick(&quot;&quot;),
            F.Button().Text(&quot;删除&quot;).ID(&quot;btndel&quot;).Icon(Icon.Delete).OnClientClick(&quot;&quot;)
        )
    )
</code></pre>
<p>如果要扩展，通过后台生成Items里的Button，首先要查看Items接收什么参数（带括号明显是个方法，括号里就是参数），点击Items按F12，飞过去，有两段，如下</p>
<pre><code>//
// 摘要:
//     子控件集合
//
// 参数:
//   extensions:
public ToolbarExtension Items(params IControlBaseExtension[] extensions);
//
// 摘要:
//     子控件集合
//
// 参数:
//   items:
public ToolbarExtension Items(params ControlBase[]items);
</code></pre>
<p>明显是重载，所以我们的扩展方法返回IControlBaseExtension[]或ControlBase[]都可以。</p>
<p>然后再给方法取个名字叫DefaultGridBtn，参数是Grid的ID</p>
<p>方法作为FineUI的扩展，是通过F点出来的，如下</p>
<pre><code>.Toolbars(
    F.Toolbar().Items(
            //生成默认的Grid增删改按钮
            F.DefaultGridBtn(&quot;Grid1&quot;)
        )
    )
</code></pre>
<h4 id="2-扩展类">2. 扩展类</h4>
<p>新建一个类</p>
<pre><code>using Microsoft.AspNetCore.Html;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Text;
using System.Text.Encodings.Web;

//命名空间要用FineUICore
namespace FineUICore
{
    /// &lt;summary&gt;
    /// FineUICore扩展
    /// &lt;/summary&gt;
    public static class FineUIEx
    {
    }
}
</code></pre>
<p>为F做扩展，要找到F是谁，var F = Html.F(); 每个页面都有，点击F()按F12，飞过去，有好几个重载，一个就够了，如下</p>
<pre><code>//
// 摘要:
//     FineUICore的扩展方法工厂
//
// 参数:
//   helper:
//
// 类型参数:
//   TModel:
public static UIExtension&lt;TModel, TModel&gt; F&lt;TModel(this IHtmlHelper&lt;TModel&gt; helper);
</code></pre>
<p>F的类型是 UIExtension&lt;TModel, TModel&gt;，就是给他做扩展，所以有如下方法</p>
<pre><code>/// &lt;summary&gt;
/// 返回默认Grid增删改按钮的默认配置 参数（GridID）
/// &lt;/summary&gt;
/// &lt;param name=&quot;F&quot;&gt;当前的F&lt;/param&gt;
/// &lt;param name=&quot;gridid&quot;&gt;Grid的ID&lt;/param&gt;
/// &lt;returns&gt;按钮的集合&lt;/returns&gt;
public static ControlBase[] DefaultGridBtn(this UIExtension&lt;dynamic, dynamic&gt; F, string gridid)
{
    List&lt;ControlBase&gt; DefaultBtn = new List&lt;ControlBase&gt;();
    return DefaultBtn.ToArray();
}
</code></pre>
<p>目前就前台就能点出来了，下面向里面放按钮就可以了</p>
<pre><code>/// &lt;summary&gt;
/// 返回默认Grid增删改按钮的默认配置 参数（GridID）
/// &lt;/summary&gt;
/// &lt;param name=&quot;F&quot;&gt;当前的F&lt;/param&gt;
/// &lt;param name=&quot;gridid&quot;&gt;Grid的ID&lt;/param&gt;
/// &lt;returns&gt;&lt;/returns&gt;
public static ControlBase[] DefaultGridBtnEx(this UIExtension&lt;dynamic, dynamic&gt; F, string gridid)
{
    List&lt;ControlBase&gt; DefaultBtn = new List&lt;ControlBase&gt;();

    var v = F.Button().ID(gridid + &quot;new&quot;).Text(&quot;新增&quot;).OnClientClick(&quot;&quot;).IconFont(IconFont.Plus).Source;
    DefaultBtn.Add(v);

    v = F.Button().ID(gridid + &quot;edit&quot;).Text(&quot;修改&quot;).OnClientClick(&quot;&quot;).IconFont(IconFont.Pencil).Source;
    DefaultBtn.Add(v);

    v = F.Button().ID(gridid + &quot;delete&quot;).Text(&quot;删除&quot;).OnClientClick(&quot;&quot;).IconFont(IconFont.Minus).Source;
    DefaultBtn.Add(v);

    return DefaultBtn.ToArray();
}
</code></pre>
<p>前台触发了什么，当然也是封装好的，下一此再放出来，配合扩展自动生成的window窗体控件，以及表单控件Form的扩展，让我们拥有自己的快速开发框架。</p>
<blockquote>
<p>静态博客是个好东西，我会把所有我写完的扩展都放出来，然后开源（尽量），但是首先，我要给这个静态博客做个留言板。</p>
</blockquote>
<blockquote>
<p><a href="https://shixixiyue.gitee.io/blog2/">我的博客</a> <br/><br>
<a href="tencent://message/?uin=935732994&amp;Site=''&amp;Menu=yes">我的QQ</a></p>
</blockquote>

            </div>
            
              <div class="tag-container">
                
                  <a href="https://shixixiyue.gitee.io/tag/njETBpqXu/" class="tag">
                    FineUICore
                  </a>
                
              </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://shixixiyue.gitee.io/netcore-bu-shu-centos7-shou-ji/">
                  <h3 class="post-title">
                    .NetCore部署Centos7手记
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="application/javascript">

AOS.init();

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>


  <script src="//jsd.onmicrosoft.cn/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
    //hljs.registerLanguage('mermaid', window.hljsDefineMermaid);
  </script>
  <script src="//jsd.onmicrosoft.cn/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
  <script>
    hljs.initLineNumbersOnLoad({
      singleLine: true
    });
  </script>
 <script src="https://jsd.onmicrosoft.cn/npm/mermaid/dist/mermaid.min.js"></script>
   <script>
    mermaid.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
    });
  </script>





  </body>
</html>
